<template>
    <div class="clocknjr">
        <div class="clockitem" v-for="(item,index) in clocklist" :key="index">
             <LoginHeader>
        <span slot="i" id="trigger1">{{item.clocktime}}</span>
        <span slot="title">
            <el-switch v-model="item.value" active-color="#13ce66"></el-switch>
        </span>
        </LoginHeader>
        <LoginHeader>
        <span slot="i">刷牙闹钟</span>
        <i slot="title" :class="{'el-icon-arrow-down':true,'slidedown':item.clockmag==true,'rotateback':item.clockmag==false}" @click="rotateshow(index)"></i>
        </LoginHeader>
      <el-collapse-transition>
        <div v-show="item.clockmag">
        <LoginHeader class="editclock transition-box">
        <span slot="i"></span>
        <span slot="title"></span>
        <span slot="more">
        <i class="el-icon-edit" @click="editby(index)" ></i>
        <i class="el-icon-delete" @click="deleteby(index)"></i>
        </span>
        </LoginHeader>
        </div>
      </el-collapse-transition>
        <el-divider></el-divider>
        </div>
    </div>
</template>
<script>
import MobileSelect from 'mobile-select'
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            clocklist:[
                {value:false,clockmag:false,clocktime:'07:00'},
                {value:false,clockmag:false,clocktime:'21:00'}
            ]
        }
    },
    components:{
        LoginHeader 
    },
    created(){
         const h = this.$createElement;
        this.$msgbox({
          title: '获取权限',
          message: h('p', {style:'letter-spacing:2px;line-height: 15px;'}, '需要手动开启悬浮窗权限才能正常收到闹钟提醒通知 '
          ),
          showClose:false,
          showCancelButton: true,
          confirmButtonText: '去开启',
          cancelButtonText: '取消',
        }).then(action => {
          console.log(action);
        }).catch(err=>err);
    },
    mounted(){
             var mobileSelect1 = new MobileSelect({
                trigger: "#trigger1",
                title: "选择时间",
                wheels: [
                {data:['07:00','09:00','10:00','11:00','12:00','13:00','14:00','18:00','21:00']}
                ],
                // position:[this.clocklist[1].clocktime],
            
                callback:function(indexArr, data){
                    console.log(data,indexArr);
                }
            });
    },
    methods:{
        rotateshow(index){
            this.clocklist[index].clockmag=!this.clocklist[index].clockmag
        },
        deleteby(index){
            this.clocklist = this.clocklist.filter((item,i) => i!== index);
        },
        editby(index){
            console.log(this.clocklist[index].clocktime);
        }
    }
}
</script>
<style lang="less" scoped>
.clocknjr{
    background-color: white;
    .slidedown{
        transition: all 0.5s;
        transform: rotate(180deg);
    }
    .rotateback{
        transition: all 0.5s;
    }
    .editclock{
        background-color: #f5f5f5;
        i{
            margin:0 15px;
        }
    }
    .el-divider{
        margin-top: 0;
    }
}
</style>
<style lang="less">
.clocknjr{
    .el-switch__core {
    margin: 0;
    position: relative;
    width: 0.53333rem;
    height: 0.56667rem;
    border: 0.01333rem solid #DCDFE6;
    outline: 0;
    border-radius: 0.53333rem;
    box-sizing: border-box;
    background: #DCDFE6;
    transition: border-color .3s,background-color .3s;
    vertical-align: middle;
}
.el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -0.52667rem;
}
.el-switch__core:after {
    content: "";
    position: absolute;
    top: 0.01333rem;
    left: 0.033rem;
    border-radius: 100%;
    transition: all .3s;
    width: 0.51333rem;
    height: 0.51333rem;
    background-color: #FFF;
}
}
</style>